<template>
    <view class="search_bar">
        <view class="searchInput">
            <uni-icons color="#C8C9CC" class="searchIcon" type="search" size="24"></uni-icons>
            <input v-model="name" :placeholder="placeholder" />
            <uni-icons @tap="clickClose" v-show="name.length > 0" color="#C8C9CC" class="clearIcon" type="clear"
                size="24"></uni-icons>
        </view>
        <text class="text" @tap="handleSearch">搜索</text>
    </view>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('')
defineProps({
    placeholder: {
        type: String,
        default: '搜索'
    }
})
const emit = defineEmits(['searchCon'])
const clickClose = () => {
    name.value = ''
    emit('searchCon', name.value)
}
const handleSearch = () => {
    emit('searchCon', name.value)
}
</script>
  
<style lang="scss">
.search_bar {
    display: flex;
    align-items: center;
    width: 94%;
    height: 100rpx;
    margin: 0 auto;

    .searchInput {
        position: relative;
        display: flex;
        align-items: center;
        width: 600rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 36rpx;
        background-color: #f7f8fa;
        padding-left: 80rpx;
        box-sizing: border-box;
        color: #323233;
        input{
            width: 80%;
            font-size: 30rpx;
        }

        .searchIcon {
            position: absolute;
            top: 0;
            left: 20rpx;
            transform: scale(.8);
        }

        .clearIcon {
            position: absolute;
            right: 15rpx;
            top: 0;

        }

    }


    .text {
        display: flex;
        align-items: center;
        flex: 1;
        height: 100%;
        justify-content: center;
        color: #323233;
        font-size: 32rpx;
    }

}
</style>
  